<template>
    <div>
        <el-dialog title="上门状态" width="500px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%;" @change="refreshData">
                                <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { changeStatus } from '@/api/reservation'
export default {
    name: 'ReservationStatusDialog',
    data() {
        return {
            dialogVisible: false,
            statusList: [
                // { label: '删除', value: 0 },
                // { label: '待上门', value: 1 },
                { label: '已上门', value: 2 },
                { label: '改约', value: 3 },
                { label: '爽约', value: 4 },
                { label: '业务取消', value: 5 },
                { label: '其他', value: 6 }
            ],
            form: {
                id: null,
                status: ''
            },
            rules: {
                status: [{ required: true, message: '请选择状态', trigger: 'change' }]
            }
        }
    },
    methods: {
        showDialog(id) {
            this.form.id = id;
            // this.resetParams();
            this.resetForm();
            this.dialogVisible = true;
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form.status = null;
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    changeStatus(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        },
        refreshData(val) {
            this.$forceUpdate()
        }
    }
}
</script>